import React from 'react';
import { useTranslation } from 'react-i18next';

interface TabsProps {
	tabsType?: string;
	onClick?: (role?: string) => void;
}

const Tabs = (props: TabsProps) => {
	const { t } = useTranslation();
	const { tabsType, onClick } = props;
	return (
		<div className="send-command-tabs-box">
			<div
				className={tabsType === 'customerNameTabs' ? 'active-customer-name-box' : 'customer-name-box'}
				onClick={() => {
					onClick && onClick('customerNameTabs');
				}}
			>
				<p className="client-name">{t('client-name')}</p>
			</div>
			<div
				className={tabsType === 'customerRoleTabs' ? 'active-customer-role-box' : 'customer-role-box'}
				onClick={() => {
					onClick && onClick('customerRoleTabs');
				}}
			>
				<p className="client-role">{t('client-role')}</p>
			</div>
		</div>
	);
};

export default Tabs;
